<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script th:src="@{/other/check.js}"></script>
<style>
    .layui-footer{
        position:fixed;
        bottom:20px;
        left: 45%;
    }
</style>
</head>
<body>
<div class="layui-row" style="width: 1500px;height: auto;margin-left: auto;margin-right: auto">
    <div id="head-one">
        <img th:src="@{/images/logo.png}" style="margin-left: 15%">
    </div>
</div>
<div class="fengexian" style="width: 100%;height: 5px;background-color: #34a8ff;margin-top:40px;margin-left: auto;margin-right:auto "></div>

<div style="width: 1350px;margin-left: auto;margin-right: auto">
    <span class="layui-breadcrumb" style="margin: 34px">
    <a href="/index/view">首页</a>
    <a><cite>个人中心</cite></a>
    </span>
    <h1 style="margin-left: 45%;margin-top: 50px">个人数据中心</h1>
    <div class="site-text" style="margin: 5%">
        <form class="layui-form" method="post" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="title" autocomplete="off" th:value="${user.getUsername()}" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="tel" lay-verify="title" autocomplete="off" th:value="${user.getTel()}" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="text" name="sex" lay-verify="title" autocomplete="off" th:value="${user.getSex()}" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" lay-verify="title" autocomplete="off" th:value="${user.getAge()}" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">住址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" lay-verify="title" autocomplete="off" th:value="${user.getAddress()}" readonly class="layui-input">
                </div>
            </div>
        </form>
    </div>
</div>
<br>
<br>
<br>
<button class="layui-btn layui-btn-danger" id="edit" style="margin-left: 48%">修改信息</button>


<!--弹出层，用户个人信息修改-->
<div class="site-text" style="margin: 5%; display: none" id="user">
    <form class="layui-form" method="post" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" id="username" name="username" lay-verify="title" autocomplete="off" th:value="${user.getUsername()}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" id="tel" name="tel" lay-verify="title" autocomplete="off" th:value="${user.getTel()}" readonly class="layui-input" title="手机号不能修改哦">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="text" id="sex" name="sex" lay-verify="title" autocomplete="off" th:value="${user.getSex()}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" id="age" name="age" lay-verify="title" autocomplete="off" th:value="${user.getAge()}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">住址</label>
            <div class="layui-input-block">
                <input type="text" id="address" name="address" lay-verify="title" autocomplete="off" th:value="${user.getAddress()}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" id="pass" required onblur="passCheck()" name="password" lay-verify="title" autocomplete="off" th:value="${user.getPassword()}" class="layui-input">
                <p id="passResult" class="layui-anim layui-anim-scaleSpring" style="color: red;display: none">密码格式有误，输入8-16位密码 至少包含一个数字和一个字母</p>
            </div>
        </div>
    </form>
</div>



<!--底部-->
<footer class="layui-footer"><p>Copyright© Design By leileiMann</p></footer>
</body>

<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script>
    layui.use(['layer','form'],function (){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        //弹出层  修改用户个人数据
        $("#edit").click(function (){
            layer.open({
                type:1,
                title: "修改用户信息",
                area: ['50%','70%'],
                btn: ["保存","取消"],
                content: $('#user'),  //设置显示的内容
                maxmin: true,   //是否允许全屏
                success:function (index,layero){   //弹窗成功打开后执行的方法
                    var indexString = JSON.stringify(index);
                    var layeroString = JSON.stringify(layero);
                },yes:function (index,layero){
                        $.ajax({
                            url:"/user/editUser",    //点击保存按钮时将数据传入到改地址的方法中进行运行
                            type: "POST",
                            data:{
                                'username':$('#username').val(),
                                'tel':$('#tel').val(),
                                'sex':$('#sex').val(),
                                'age':$('#age').val(),
                                "address":$('#address').val(),
                                'password':$('#pass').val()
                            },
                            dataType:"json",
                            success:function (result){
                                if (result.code === "1"){
                                    layer.msg(result.msg,{icon:result.icon,anim:result.anim,time:3000},function (){
                                        window.parent.location.reload();  //重载父页面
                                    })
                                }else {
                                    layer.msg(result.msg,{icon:result.icon,anim:4,time:3000});
                                }
                            }
                        })
                        layer.close(index);
                }, cancel:function (index,layero){
                    if (confirm("是否关闭本弹窗？")){
                        layer.close(index);
                    }
                    return false;
                },btn2:function (index,layero){
                    if (confirm("取消保存修改好的数据么？")){
                        layer.close(index);
                    }
                    return false;
                }
            })
        })
    })
</script>
</html>